<template>
  <div class="tabbar-wrapper">
    <a href="#" class="tabbar-item active">
        <img src="@/assets/chatlogIcon.png"/>
        <p class="tabbar-item-text">消息</p>
        <span class="chatlog-count">8</span>
    </a>
    <a href="#" class="tabbar-item">
        <img src="@/assets/contactsIcon.png"/>
        <p class="tabbar-item-text">联系人</p>
    </a>
    <a href="#" class="tabbar-item">
        <img src="@/assets/dynamicIcon.png"/>
        <p class="tabbar-item-text">动态</p>
    </a>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped lang="stylus">
@import '~common/stylus/varibles'
@import '~common/stylus/border-1px'
  .tabbar-wrapper
    display:flex
    align-items:center
    position:fixed
    bottom:0
    left:0
    z-index:999
    height:2.496rem
    width:100%
    background:$bgColor
    border-top-1px(#c6c5c3)
    .tabbar-item
      display:block
      flex:1
      position:relative
      text-align:center
      font-size:13px
      color:#9b9a98
      img
        width:1.130667rem
        height:1.002667rem
      .tabbar-item-text
        margin-top:.256rem
      .chatlog-count
        display:block
        position:absolute
        top:0
        right: 1.74667rem
        height:.7rem
        width:.7rem
        border-radius:50%
        background:#f90400
        color:white
    .active
      .tabbar-item-text
        color:#13acf0
</style>
